<!doctype html>
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <meta charset="utf-8">
  <script src="../../../webcomponentsjs/webcomponents.js"></script>
  <script>Polymer = {dom: 'shadow'};</script>
  <link rel="import" href="../../polymer.html">
</head>
<body>

<x-outer></x-outer>

<dom-module id="x-host">
  <template>
    Foo: [<content select="[foo]"></content>]
    Bar: [<content select="[bar]"></content>]
  </template>
  <script>
  HTMLImports.whenReady(function() {
    Polymer({
      is: 'x-host'
    });
  });
  </script>

<dom-module>

<dom-module id="x-outer">
<template>
  <x-host id="host">
    <child foo>~Foo~</child>
    <child foo bar>~Foo+Bar~</child>
    <child id="test" bar>~Bar~</child>
  </x-host>
  <br>
  <button on-click="test">Test</button>
  <button on-click="test2">Test2</button>
</template>
<script>
HTMLImports.whenReady(function() {
  Polymer({
    is: 'x-outer',

    test: function() {
      if (this.$.test.hasAttribute('foo')) {
        Polymer.dom(this.$.test).removeAttribute('foo');
      } else {
        Polymer.dom(this.$.test).setAttribute('foo', 'hi');
      }
    },

    test2: function() {
      var pd = Polymer.dom(this.$.test);
      if (pd.parentNode) {
        Polymer.dom(pd.parentNode).removeChild(this.$.test);
      } else {
        Polymer.dom(this.$.host).appendChild(this.$.test);
      }
    }

  });
});
</script>
</dom-module>

</body>
</html>
